<template>
  <div>
    <!--新增，编辑角色-->
    <dt-modal-edit ref="editRef" :title="!operateType ? '新建角色' : '编辑角色'" @ok="onOk">
      <Tabs type="card" :animated="false" v-model="showTab">
        <TabPane label="角色信息" name="roleMsg">
          <dt-info ref="msgRef"></dt-info>
        </TabPane>
        <TabPane label="功能权限" name="permission">
          <div style="max-height: 400px; overflow: auto">
            <Tree
              :data="permissionData"
              ref="treeRef"
              show-checkbox
              check-strictly
              check-directly
              @on-check-change="permissionChange"></Tree>
            <!--loading-->
            <dt-loading ref="loadingRef" :loading="loading"></dt-loading>
          </div>
        </TabPane>
      </Tabs>
    </dt-modal-edit>
  </div>
</template>

<script setup>
  import { watch, ref } from 'vue'
  import { editOpt } from '../biz/edit'
  import dt from '@dt/dt'
  import roleMgr from '../biz/index'
  import permissionMgr from '@/biz/permission'
  const [editRef, msgRef, treeRef] = [ref(), ref(), ref()]
  const operateType = ref(0) // 0新增 1编辑
  const loading = ref(false)
  const editInfo = ref({})
  const permissionData = ref([])
  const showTab = ref('roleMsg')

  const emits = defineEmits(['search'])

  watch(showTab, (newVal) => {
    if (newVal == 'permission') {
      getPermissionData()
    }
  })

  function getPermissionData() {
    // 权限树数据
    loading.value = true
    permissionMgr.permissionMenuList().then((res) => {
      permissionData.value = res
      resolveTree(permissionData.value, editInfo.value.permissionDataList)
      loading.value = false
    })
  }

  function add() {
    operateType.value = 0
    showTab.value = 'roleMsg'
    editInfo.value = {
      roleName: '',
      state: 1,
      roleDesc: '',
      permissionDataList: []
    }
    msgRef.value.init(new editOpt(fun), editInfo)
    editRef.value.show()
    msgRef.value.resetFields()
  }

  const fun = {
    changeFun: (key, val) => {
      editInfo.value[key] = val
    },
    isDisabled: () => {
      return editInfo.value.roleType == 1 ? true : false
    },
    isEdit: () => {
      return operateType.value == 1 ? true : false
    }
  }

  function edit(row) {
    operateType.value = 1
    showTab.value = 'roleMsg'
    editInfo.value = { ...row }
    editInfo.value.permissionDataList = dt.tool.deepClone(row.authIds.split(','))
    editInfo.value.state = Number(row.state)
    msgRef.value.init(new editOpt(fun), editInfo)
    editRef.value.show()
  }

  function onOk() {
    msgRef.value.validate().then((res) => {
      if (res) {
        let params = {
          ...editInfo.value
        }

        params.authIds = editInfo.value.permissionDataList.join(',')
        if (operateType.value) {
          // 编辑
          roleMgr.sysRoleUpdate(params).then((res) => {
            dt.ui.Message.success('修改成功')
            emits('search')
            editRef.value.hide()
          })
        } else {
          // 新增
          roleMgr.sysRoleInsert(params).then((res) => {
            dt.ui.Message.success('新增成功')
            emits('search')
            editRef.value.hide()
          })
        }
      }
    })
  }

  function permissionChange(val, target) {
    editInfo.value.permissionDataList = []
    dt.tool.treeChange(permissionData.value, target, treeRef.value).then((res) => {
      res.forEach((item) => {
        editInfo.value.permissionDataList.push(item.id)
      })
    })
  }

  function resolveTree(treeData, ids) {
    treeData.forEach((item) => {
      if (ids.includes(String(item.id))) {
        item.checked = true
      } else {
        item.checked = false
      }
      if (item.children && item.children.length > 0) {
        resolveTree(item.children, ids)
      }
    })
  }

  defineExpose({ add, edit })
</script>

<style scoped></style>
